<template>
<div>
    <NavigationBar />
    <el-container>
      <el-header>
        <el-select v-model="selectedTime" placeholder="选择时间段">
          <el-option label="近一周" value="week"></el-option>
          <el-option label="近一月" value="month"></el-option>
          <el-option label="近一年" value="year"></el-option>
        </el-select>
        <el-select v-model="selectedOrderForm" placeholder="选择点餐方式">
          <el-option label="排队点餐" value="0"></el-option>
          <el-option label="在线点餐" value="1"></el-option>
          <el-option label="所有" value="2"></el-option>
        </el-select>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-header>
      <el-main>
        <el-table :data="dishes" style="width: 100%" :default-sort="{ prop: 'quantity', order: 'descending' }">
            <el-table-column prop="dish_ID" label="菜品ID" width="180"></el-table-column>
            <el-table-column prop="merchant_name" label="商户" width="180"></el-table-column>
            <el-table-column prop="dish_name" label="菜品名称" width="180"></el-table-column>
            <el-table-column prop="quantity" label="销量" width="180" sortable></el-table-column>
        </el-table>
      </el-main>
    </el-container>
</div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';  // 用于访问 Vuex store 中的数据
import axios from '@/axios';
import NavigationBar from '@/components/NavigationBar.vue';
import { ElMessage } from 'element-plus';

const store = useStore(); // 使用 useStore 函数获取 Vuex Store 实例

const selectedTime = ref('');
const selectedOrderForm = ref('');
const dishes = ref([]);

const fetchData = async () => {
    const user_ID = store.state.user.id; // 从 Vuex Store 中获取当前用户的 ID
    try {
    const response = await axios.post('/api/user/starDishAnalysis', {
        user_ID,
        time: selectedTime.value,
        orderForm: selectedOrderForm.value,
    });
    dishes.value = response.data;
    } catch (error) {
    ElMessage.error('获取数据失败');
    }
};

</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.el-main {
  padding: 20px;
}
</style>
    